<script setup>
import { inject, ref } from "vue";

// form values
const filterFormValues = inject("filterFormValues");
// list data
const listData = inject("listData");

const arrs = inject("sxlist");

// 筛选弹框
const popupshow = ref(false);

// handle submit
const handleSubmit = async () => {
  listData.value.pullDownRefresh();
};

// 重置
const reset = () => {
  filterFormValues.value.keyword = "";

  handleSubmit();
};

// 确认
const confirm = () => {
  handleSubmit();
};

const date = ref(null);
// 日期选择器
const currentDate = getDate({
  format: true,
});

date.value = getDate({
  format: true,
});

const startDate = ref(null);
const endDate = ref(null);

startDate.value = getDate("start");
endDate.value = getDate({
  format: true,
});

function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  // let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year;
  }
  month = month > 9 ? month : "0" + month;
  // day = day > 9 ? day : '0' + day;
  return `${year}-${month}`;
}

const DateSwitching = (Data, formString, type) => {
  let newdate = "";
  if (type == 1) {
    newdate = Data.split(formString);

    return newdate[0] + "年";
  }
  if (type == 2) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月";
  }
  if (type == 3) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月" + newdate[2] + "日";
  }
};
const goOpen = () => {
  uni.navigateTo({
    url: "/pages/team/shopkeeper/quotaVoucher?type=" + type.value,
  });
};
function bindDateChange(e) {
  // formdata.value.page = 1;
  date.value = e.detail.value;
  // formdata.value.month = e.detail.value;
  // getuserlist();
  //   getChangeList(date.value);
  filterFormValues.value.month = e.detail.value;
  handleSubmit();
}
const screenfun = () => {
  popupshow.value = true;
};

const close = () => {
  popupshow.value = false;
};
const closefun = () => {
  filterFormValues.value.level_id = "";
  handleSubmit();
  popupshow.value = false;
};

const open = () => {};
const selectsx = (id) => {
  if (id) {
    filterFormValues.value.level_id = id;
  } else {
    filterFormValues.value.level_id = "";
  }
};
const selectsbfun = () => {
  handleSubmit();
  popupshow.value = false;
};
</script>

<template>
  <view class="filter-container">
    <view class="filter-header">
      <view class="item-data">
        <picker
          mode="date"
          :value="date"
          :start="startDate"
          fields="month"
          :end="endDate"
          @change="bindDateChange"
        >
          <view class="content-time"
            ><text>{{ DateSwitching(date, "-", 2) }}</text
            ><image src="@/pages/team/static/ls-dowe.png" mode="scaleToFill"
          /></view>
        </picker>
      </view>

      <!-- 搜索框 -->
      <view class="input-content">
        <uni-search-bar
          placeholder="客户名/手机号"
          @confirm="handleSubmit"
          v-model="filterFormValues.keyword"
          cancelButton="none"
          @clear="reset"
        >
        </uni-search-bar>
        <view class="search-icon" @click="screenfun">
          <image src="/static/cloudlibrary/search.png" mode="scaleToFill" />
        </view>
      </view>
    </view>

    <up-popup
      :show="popupshow"
      @close="close"
      mode="bottom"
      @open="open"
      round="25"
      :closeable="true"
    >
      <view>
        <view class="popup-title">筛选</view>
        <view class="popup-content">
          <view class="popup-content-title">用户等级</view>
          <view class="popup-content-list">
            <view
              class="popup-item"
              :class="
                !filterFormValues.level_id || filterFormValues.level_id == ''
                  ? 'popup-item-select'
                  : ''
              "
              @click="selectsx()"
            >
              全部
            </view>
            <view
              class="popup-item"
              :class="
                filterFormValues.level_id == item.level_id
                  ? 'popup-item-select'
                  : ''
              "
              @click="selectsx(item.level_id)"
              v-for="(item, index) in arrs"
              :key="index"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="food-bt">
          <view class="qx-bt" @click="closefun">取消</view>
          <view class="sx-bt" @click="selectsbfun">筛选</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<style lang="scss" scoped>
@import "./ClientListFilter";
</style>
